//新建空的template 和script
<template>
<!-- 防止事件的默认行为prevent 处理停止浏览器的默认提交行动 console.log()加入了内部onSubmit()法-->
    <form @submit.prevent="onSubmit">
        <div>
             <label for="new input">what needs to bo done</label><br>
            <!-- v-model 的使用v-model="variable" -->
            <!-- v-model 行为 v-model.trim 空白之前或之后 输入 -->
            <input type="text" autocomplete="off" id="new-todo-input" name="new-todo" v-model.lazy.trim="label">
        </div>
        <div class="btn-group">
             <button type="submit" class="btn btn__primary" @click="onCancel">Cancel
             <span class="visually-hidden">editing {{label}}</span>
             </button>
              <button type="submit" class="btn btn__primary">save
              <span class="visually-hidden">edit for {{label}}</span>
              </button>
        </div>
       
        <!-- v-model 通过登录的价值提交的数据到我们的submit 方法,数据属性被访问使用this关键词,label现场使用this.label -->
       
    </form>
</template>
<script>
    export default {
        props:{
            label:{
                type:String,
                required:true
            },
            id:{
                type:String,
                required:true
            }
        },
        methods:{
            onSubmit(){
                // console.log('Label value: ',this.label)
                // 子组件调父组件的方法 第一个传递事件,第二个传递方法
                this.$emit("added",this.label);
                this.label = "";
            },
            onCancel(){
                console.log(123)
                // this.$emit("edit-cancelled");
            }
        },
        data(){
            return {
                label:this.label
            };
        },
        
    };
</script>
// 新建html 表单允许我们输入新的待办项并提交到<app></app>
